<template>
	<view class="content">
		<scroll-view class="scroll_cont" scroll-y="true">
			<view><image src="../../static/images/logo2.png" mode="" class="logo_img"></image></view>
			<view class="btn_content">
				<view class="btn_group clearfix">
					<button  class="active_btn" >重置密码</button>
				</view>
			</view>
		
			<view class="info_content" v-if="!isActive">
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="text" value="" placeholder="请输入账号" v-model="resetInfo.uUser" class="line_input" />
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_name.png" mode="" class="line_icon"></image>
					<input type="number"  placeholder="请输入手机号" v-model="resetInfo.mobile" name="mobile" class="line_telinput" />
					<button type="primary" class="code_btn" @click="getCode" :class="{ disabled: sendBool }">
						{{ codeText }}
						<text v-if="sendBool">{{ codeCue }}</text>
					</button>
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/safe.png" mode="" class="line_icon"></image>
					<input type="number" placeholder="请输入验证码" v-model="resetInfo.code" class="line_input" name="code" />
					<!-- <image src="../../static/images/loginIcon/verify.png" mode="" class="line_verify"></image> -->
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_password.png" mode="" class="line_icon"></image>
					<input :type="isRegPwdShow ? 'password' : 'text'" value="" placeholder="请输入密码" class="line_input" name="uPwd" v-model="resetInfo.uPwd" />
					<image
						src="../../static/images/loginIcon/new_close_eyes.png"
						mode=""
						class="line_icon_r"
						@click="isRegPwdShow = !isRegPwdShow"
						:class="{ noShow: !isRegPwdShow }"
					></image>
					<image
						src="../../static/images/loginIcon/open_eyes.png"
						mode=""
						class="line_icon_r"
						@click="isRegPwdShow = !isRegPwdShow"
						:class="{ noShow: isRegPwdShow }"
					></image>
				</view>
				<view class="info_line clearfix">
					<image src="../../static/images/loginIcon/new_icon_password.png" mode="" class="line_icon"></image>
					<input :type="isRegConfirmPwdShow ? 'password' : 'text'"  placeholder="请输入安全密码" v-model="resetInfo.uZfPwd" name="uZfPwd" class="line_input" />
					<image
						src="../../static/images/loginIcon/new_close_eyes.png"
						mode=""
						class="line_icon_r"
						@click="isRegConfirmPwdShow = !isRegConfirmPwdShow"
						:class="{ noShow: !isRegConfirmPwdShow }"
					></image>
					<image
						src="../../static/images/loginIcon/open_eyes.png"
						mode=""
						class="line_icon_r"
						@click="isRegConfirmPwdShow = !isRegConfirmPwdShow"
						:class="{ noShow: isRegConfirmPwdShow }"
					></image>
				</view>

				
				<view class="bottom_btn"><button type="primary" class="reg_btn" :disabled="isRest" @click="handlReset">重置</button></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	import validate from "@/common/ys-validate.js" 


export default {
	data() {
		return {
			isActive: false,
			isShow: true,
			
			ischecked:false,
			
			
			isShowCircl: false,
			isRegPwdShow: true,
			isRegConfirmPwdShow: true,
			

			codeText: '获取验证码',
			codeCue: '秒后可重发',
			sendBool: false,
			btnCtrl: true,

			resetInfo: {},
			logininfo: {},
			isRest: false
		};
	},

	onLoad: function() {
		
	},

mounted :function(e){
	
		
},



	methods: {

		
		getCode() {
			if (this.btnCtrl) {
				var mobile = this.resetInfo.mobile;
				var uUser = this.resetInfo.uUser;
				
				
				if (!uUser) {
					this.$api.msg('请输入账号');
					return false;
				}
				
				if (!validate.isPhone(mobile)) {
					this.$api.msg('手机号码输入错误');
					return false;
				}

				this.$api.http
					.post('auth/getReSetSmsCode', {
						mobile: mobile,
						uUser:uUser
					})
					.then(res => {
					
						if ( res.status==200 ) {
							this.$api.msg('获取成功');
							this.btnCtrl = false;
							this.sendBool = true;
							this.codeText = 60;
							let self = this;

							var fun = setInterval(function() {
								self.codeText = self.codeText - 1;
								if (self.codeText == 0) {
									self.btnCtrl = true;
									self.codeText = '获取验证码';
									self.sendBool = false;
									clearInterval(fun);
								}
							}, 1000);
						} else this.$api.msg(res.Message || res.msg);
					});
			}
		},
		handlReset() {
			
			var uUser = this.resetInfo.uUser;
			if (!uUser) {
				this.$api.msg('账号不能为空');
				return false;
			}
			
			var mobile = this.resetInfo.mobile;
			if (!validate.isPhone(mobile)) {
				this.$api.msg('手机号码输入错误');
				return false;
			}
			
			var code = this.resetInfo.code;
			if (!code) {
				this.$api.msg('验证码输入错误');
				return false;
			}
			
			
			var uPwd = this.resetInfo.uPwd;
			if (!uPwd) {
				this.$api.msg('密码不能为空');
				return false;
			}
			
			var uZfPwd = this.resetInfo.uZfPwd;
			if (!uZfPwd) {
				this.$api.msg('支付密码不能为空');
				return false;
			}
			
			

			this.$api.http
				.post('auth/resetAction', {
					uUser: uUser,mobile:mobile,uPwd:uPwd,uZfPwd:uZfPwd,code:code
				})
				.then(res => {
					 this.$api.msg(res.msg);
					if (res.status == 200) {
						this.isRest = true; //禁止按钮
							setTimeout(() => {
								uni.navigateBack({
									
								})
							}, 1000);
						}

				
				});
		}
	}
};
</script>

<style lang="scss">
.clearfix {
	zoom: 1;
	display: block;
}

.clearfix:after {
	content: '.';
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}
.disabled {
	background: gray;
}
.noShow {
	display: none;
}

.text-blue {
	color: #5390e3;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.content {
	padding-top: 30%;
	height: 100vh;
	background-image:url url(../../static/images/new_bg_login.jpg) no-repeat;
	background: #0e1438;
	overflow: hidden;
	text-align: center;
	background-size: 100% auto;

	.scroll_cont {
		height: 100vh;

		.logo_img {
		//	width: 100%;
		width: 540upx;
		height: 220upx;
		}

		.btn_content {
			width: 100%;
			padding: 0 72upx;

			.btn_group {
				border: 1upx solid hsla(0, 0%, 100%, 0.3);
				border-radius: 38upx;

				.login_btn {
					width: 50%;
					float: left;
					color: hsla(0, 0%, 100%, 0.3);
					font-size: 32upx;
					height: 80upx;
					line-height: 80upx;
					background-color: rgba(0, 0, 0, 0);
				}

				.reg_btn {
					float: right;
					color: hsla(0, 0%, 100%, 0.3);
					font-size: 32upx;
					height: 80upx;
					width: 50%;
					line-height: 80upx;
					background-color: rgba(0, 0, 0, 0);
				}

				.active_btn {
					color: #ffffff;
					border-radius: 38upx;
					background-color: hsla(0, 0%, 100%, 0.3);
					-webkit-tap-highlight-color: transparent;
				}
			}
		}

		.info_content {
			width: 100%;
			padding: 0 72upx;
			margin-top: 32upx;

			.info_line {
				width: 100%;
				height: 84upx;
				margin-bottom: 20upx;
				border-bottom: 1upx solid hsla(0, 0%, 100%, 0.4);
				position: relative;

				.line_icon {
					float: left;
					width: 85upx;
					height: 85upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
				}

				.line_icon_r {
					position: absolute;
					width: 85upx;
					height: 85upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
					top: 0;
					right: 0;
				}

				.code_btn {
					position: absolute;
					font-size: 24upx;
					height: 68upx;
					line-height: 68upx;
					top: 0upx;
					right: 0;
				}

				.line_verify {
					position: absolute;
					width: 256upx;
					height: 100upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
					top: -12upx;
					right: -60upx;
				}

				.line_input {
					float: left;
					display: block;
					border: none;
					outline: none;
					width: 70%;
					height: 85upx;
					line-height: 85upx;
					color: #fff;
					padding-left: 10upx;
					font-size: 30upx;
					background: none;
					text-align: left;
				}
				
				
				.line_telinput {
					float: left;
					display: block;
					border: none;
					outline: none;
					width: 50%;
					height: 85upx;
					line-height: 85upx;
					color: #fff;
					padding-left: 10upx;
					font-size: 30upx;
					background: none;
					text-align: left;
				}
			}

			.info_negotiate {
				width: 100%;
				height: 84upx;

				.switch_content {
					float: left;

					.switch {
					}

					.switch_text {
						color: #fff;
						font-size: 24upx;
						margin-left: 6upx;
					}
				}

				.line_icon {
					float: left;
					width: 70upx;
					height: 70upx;
					-webkit-transform: scale(0.4);
					transform: scale(0.4);
				}

				.agree_cont {
					float: left;
					height: 70upx;
					line-height: 70upx;
					font-size: 24upx;
					color: #fff;

					.agree {
					}

				
				}
			}

			.bottom_btn {
				margin-bottom: 80upx;

				.reg_btn {
					background: linear-gradient(90deg, #4e8cff, #2f79ff);
					color: #fff;
					line-height: 86upx;
					font-size: 32upx;
					margin-top: 10upx;
					border-radius: 38upx;
				}
			}
		}
	}
}

	.agree_green {
						color: #03fffc;
					}
</style>
